
import { useState } from 'react';
import { getData2, selectOptions } from '../Data'
import { useMount, useReactive } from 'ahooks';


import { FlexGrid } from "@grapecity/wijmo.react.grid";
import { CollectionView } from "@grapecity/wijmo";

import { Select } from 'antd';
const WijmoM01 = () => {
    const InitData = useReactive({ value: '亚洲' })
    const [Data, setData] = useState()
    useMount(() => { setData(new CollectionView(getData2(200), { filter: (item) => item.country === InitData.value })) })
    const onChange = (e) => { setData(new CollectionView(getData2(200), { filter: (item) => item.country === e })) }

    return (
        <div className="Page">
            <Select options={selectOptions} defaultValue={InitData.value} onChange={onChange} />
            <FlexGrid itemsSource={Data} />
        </div>
    );
};

export default WijmoM01